<template>
  <dv-border-box-8 style="padding-top: 10px">
    <dv-decoration-7 style="width: 100%; height: 30px"
      >能耗占比</dv-decoration-7
    >
    <div id="ringlike" style="width: 100%; height: 250px"></div>
    <span class="span1">能耗总数：</span>
    <span class="span2">864630</span>
  </dv-border-box-8>
</template>

<script>
// import {getEmissionPercent} from "@/api/dv/carbon";

export default {
  name: "Ringlike",
  mounted() {
    this.initEchart();
  },
  data() {
    return {};
  },
  methods: {
    initEchart() {
      let myChart = this.$echarts.init(
        document.getElementById("ringlike"),
        "dark"
      );
      let option = {
        backgroundColor: "",
        legend: {
          top: "top",
        },
        series: [
          {
            name: "能耗占比",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            label: {
                show: true,
                formatter(param) {
                  return param.name + ' (' + param.percent + '%)';
                }
              },

            data: [
              { value: 8480, name: "办公耗电量" },
              { value: 4380, name: "办公用水量" },
              { value: 12320, name: "生产用水量" },
              { value: 23300, name: "生产耗电量" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.span1 {
position: absolute;
bottom: 46%;
right: 43%;
font-size: 15px;
font-weight: 700;
}
.span2 {
position: absolute;
bottom: 36%;
right: 46%;
font-size: 16px;
font-weight: 700;
}
</style>
